<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection"/>
    <title>demo</title>
    <link rel="stylesheet" href="./common.css">
    <link rel="stylesheet" href="./index.css">
    <script src="./index/jquery-2.1.1.min.js"></script>
    <script src="./common.js"></script>


</head>
<body>
    <div class="main" id="main">
        <!--背景图-->
        <div id="web_bg"  class="kk" >
                <li><img src="./img/小图标/枸杞.png" alt="" id="gq1" class="gq aq a10585" ></li>
                <li><img src="./img/小图标/枸杞.png" alt="" id="gq2" class="gq aq a10585"></li>
                <li><img src="./img/小图标/枸杞.png" alt="" id="gq3" class="gq aq a10585"></li>
                <li><img src="./img/小图标/枸杞.png" alt="" id="gq4" class="gq aq a10585"></li>
                <li><img src="./img/小图标/枸杞.png" alt="" id="gq5" class="gq aq a10585"></li>
                <li><img src="./img/小图标/羊肉.png" alt="" id="sleep" class="sleep bq a10578"></li>
                <li><img src="./img/小图标/甘草.png" alt="" id="gancao" class="gancao cq a10579"></li>
                <li><img src="./img/小图标/瓜.png" alt="" id="gua" class="gua dq a10586"></li>
                <li><img src="./img/小图标/马铃薯.png" alt="" id="mls" class="mls eq a10588"></li>
                <li><img src="./img/小图标/马铃薯.png" alt="" id="mls1" class="mls eq a10588"></li>
                <li><img src="./img/小图标/马铃薯.png" alt="" id="mls2" class="mls eq a10588"></li>
                <li><img src="./img/小图标/葡萄酒.png" alt="" id="ptj" class="ptj fq a10591"></li>
                <li><img src="./img/小图标/葡萄酒.png" alt="" id="ptj1" class="ptj fq a10591"></li>
                <li><img src="./img/小图标/葡萄酒.png" alt="" id="ptj2" class="ptj fq a10591"></li>
                <li><img src="./img/小图标/大米.png" alt="" id="dm" class="dm hq a10597"></li>
                <li><img src="./img/小图标/大米.png" alt="" id="dm1" class="dm hq a10597"></li>
                <li><img src="./img/小图标/大米.png" alt="" id="dm2" class="dm hq a10597"></li>
                <li><img src="./img/小图标/大米.png" alt="" id="dm3" class="dm hq a10597"></li>
                <li><img src="./img/小图标/大米.png" alt="" id="dm4" class="dm hq a10597"></li>
                <li><img src="./img/小图标/菜心.png" alt="" id="cx" class="cx iq a10601"></li>
                <li><img src="./img/小图标/菜心.png" alt="" id="cx1" class="cx iq a10601"></li>
                <li><img src="./img/小图标/菜心.png" alt="" id="cx2" class="cx iq a10601"></li>
                <li><img src="./img/小图标/菜心.png" alt="" id="cx3" class="cx iq a10601"></li>
                <li><img src="./img/小图标/牛奶.png" alt="" id="milk" class="milk jq a10605"></li>
                <li><img src="./img/小图标/牛奶.png" alt="" id="milk1" class="milk jq a10605"></li>
                <li><img src="./img/小图标/牛奶.png" alt="" id="milk2" class="milk jq a10605"></li>
                <li><img src="./img/小图标/牛奶.png" alt="" id="milk3" class="milk jq a10605"></li>
                <li><img src="./img/小图标/蔬菜.png" alt="" id="sc" class="sc kq a10607"></li>
                <li><img src="./img/小图标/蔬菜.png" alt="" id="sc1" class="sc kq a10607"></li>
                <li><img src="./img/小图标/黄牛.png" alt="" id="hn" class="hn lq a10610"></li>
                <li><img src="./img/小图标/黄牛.png" alt="" id="hn1" class="hn lq a10610"></li>
                <li><img src="./img/小图标/黄牛.png" alt="" id="hn2" class="hn lq a10610"></li>
                <li><img src="./img/小图标/黄花菜.png" alt="" id="hc" class="hc mq a10612"></li>
                <li><img src="./img/小图标/黄花菜.png" alt="" id="hc1" class="hc mq a10612"></li>
                <li><img src="./img/小图标/苹果.png" alt="" id="apple" class="apple nq a10613"></li>
                <li><img src="./img/小图标/大枣.png" alt="" id="dz" class="dz oq a10614"></li>
                <li><img src="./img/小图标/蜂蜜1.png" alt="" id="fm" class="fm pq a10615"></li>
                <li><img src="./img/小图标/鱼.png" alt="" id="yu" class="yu qq a10617"></li>
                <li><img src="./img/小图标/鱼.png" alt="" id="yu1" class="yu qq a10617"></li>
                <li><img src="./img/小图标/杂粮.png" alt="" id="zl" class="zl rq a10618"></li>
                <li><img src="./img/小图标/油料.png" alt="" id="yl" class="yl sq a10619"></li>
                <li><img src="./img/小图标/中蜂.png" alt="" id="zf" class="zf tq a10621"></li>
                <li><img src="./img/小图标/中蜂.png" alt="" id="zf1" class="zf tq a10621"></li>
                <li><img src="./img/小图标/种禽.png" alt="" id="zq" class="zq vq a10623"></li>
        </div>
    </div>
    <div class="footercontent" style="display: none" id="b1aa">
            <span>
                <ul id="aq">
                    <li class="nn" >中国枸杞之乡</li>
                    <li class="mm"><img src="./img/小图标/枸杞.png" alt="枸杞" name="枸杞"></li>
                </ul>
                 <ul id="bq">
                    <li class="nn" >中国滩羊肉之乡</li>
                    <li class="mm"><img src="./img/小图标/羊肉.png" ></li>
                </ul>
                 <ul id="cq">
                    <li class="nn" >中国甘草之乡</li>
                    <li class="mm" ><img src="./img/小图标/甘草.png" ></li>
                </ul>
                 <ul id="dq">
                    <li class="nn" >中国硒砂瓜之乡</li>
                    <li class="mm"><img src="./img/小图标/瓜.png" ></li>
                </ul>
                 <ul id="eq">
                    <li class="nn" >中国马铃薯之乡</li>
                    <li class="mm"><img src="./img/小图标/马铃薯.png" ></li>
                </ul>
            </span>
    </div>
    <div class="footercontent" style="display: none" id="b1bb">
            <span>
                <ul id="fq">
                    <li class="nn" >宁夏贺兰山东麋葡萄酒</li>
                    <li class="mm"><img src="./img/小图标/葡萄酒.png" ></li>
                </ul>
                 <ul id="hq">
                    <li class="nn" >宁夏大米</li>
                    <li class="mm"><img src="./img/小图标/大米.png" ></li>
                </ul>
                 <ul id="iq">
                    <li class="nn" >宁夏菜心</li>
                    <li class="mm"><img src="./img/小图标/菜心.png" ></li>
                </ul>
                 <ul id="jq">
                    <li class="nn" >宁夏牛奶</li>
                    <li class="mm"><img src="./img/小图标/牛奶.png" ></li>
                </ul>
                 <ul id="kq">
                    <li class="nn" >六盘山冷凉蔬菜</li>
                    <li class="mm"><img src="./img/小图标/蔬菜.png" ></li>
                </ul>
                <ul id="lq">
                    <li class="nn" >固原黄牛</li>
                    <li class="mm"><img src="./img/小图标/黄牛.png" ></li>
                </ul>
                <ul id="mq">
                    <li class="nn" >盐池黄花菜</li>
                    <li class="mm"><img src="./img/小图标/黄花菜.png" ></li>
                </ul>
                <ul id="nq">
                    <li class="nn" >沙坡头苹果</li>
                    <li class="mm"><img src="./img/小图标/苹果.png" ></li>
                </ul>
                <ul id="oq">
                    <li class="nn" >灵武长枣</li>
                    <li class="mm"><img src="./img/小图标/大枣.png" ></li>
                </ul>
                <ul id="pq">
                    <li class="nn" >泾源蜜蜂</li>
                    <li class="mm"><img src="./img/小图标/蜂蜜1.png" ></li>
                </ul>
            </span>
    </div>
    <div class="footercontent" style="display: none" id="b1cc">
            <span>
                <ul id="qq">
                    <li class="nn" >淡水鱼</li>
                    <li class="mm"><img src="./img/小图标/鱼.png" ></li>
                </ul>
                 <ul id="rq">
                    <li class="nn" >小杂粮</li>
                    <li class="mm"><img src="./img/小图标/杂粮.png" ></li>
                </ul>
                 <ul id="sq">
                    <li class="nn" >油料</li>
                    <li class="mm"><img src="./img/小图标/油料.png" ></li>
                </ul>
                 <ul id="tq">
                    <li class="nn" >中蜂</li>
                    <li class="mm"><img src="./img/小图标/中蜂.png" ></li>
                </ul>
                 <ul id="vq">
                    <li class="nn" >种禽</li>
                    <li class="mm"><img src="./img/小图标/种禽.png" ></li>
                </ul>
            </span>
    </div>
    <div class="footerco">


        <div class="footer">
                <span class="footerlei" id="aa">五大之乡</span>
                <span class="footerlei" id="bb">区域公用品牌</span>
                <span class="footerlei" id="cc">地方特色产业</span>
        </div>
    </div>
    <!--预览-->
    <div class="kkk">


        <div class="yulan" style="display: none">
            <li class="yulanimg"><img src="" alt="" class="imgs"></li>
            <li class="liname"></li>
        </div>
    </div>

    <script>
        var wrapper = document.querySelector('#main');
        var element = document.querySelector('#main');
        var vendors;
        var distance = {};
        var origin;
        var scale = 1;
        var isCanScale = false;

        // 边界
        var boundary = {
            right: 0,
            bottom: 0
        }
        function handleTouch(e) {
            switch(e.type) {
                case 'touchstart':
                    if (e.touches.length > 1) {
                        distance.start = getDistance({
                            x: e.touches[0].screenX,
                            y: e.touches[0].screenY
                        }, {
                            x: e.touches[1].screenX,
                            y: e.touches[1].screenY
                        });
                    }
                    break;
                case 'touchmove':
                    if (e.touches.length === 2) {
                        origin = getOrigin({
                            x: event.touches[0].pageX,
                            y: event.touches[0].pageY
                        }, {
                            x: event.touches[1].pageX,
                            y: event.touches[1].pageY
                        });
                        distance.stop = getDistance({
                            x: e.touches[0].screenX,
                            y: e.touches[0].screenY
                        }, {
                            x: e.touches[1].screenX,
                            y: e.touches[1].screenY
                        });
                        scale = distance.stop / distance.start;
                        isCanScale = true;
                        setScaleAnimation(scale, true);
                    }
                    break;
                case 'touchend':
                    scale = 1;
                    setScaleAnimation(scale);
                    break;
                case 'touchcancel':
                    scale = 1;
                    setScaleAnimation(scale);
                    break;
                default:;
            }
        }
        function vendor() {
            var TRANSITION = 'transition';
            var TRANSITION_END = 'transitionend';
            var TRANSFORM = 'transform';
            var TRANSFORM_PROPERTY = 'transform';
            var TRANSITION_PROPERTY = 'transition';

            if (typeof document.body.style.webkitTransform !== undefined) {
                TRANSFORM = 'webkitTransform';
                TRANSITION = 'webkitTransition';
                TRANSITION_END = 'webkitTransitionEnd';
                TRANSFORM_PROPERTY = '-webkit-transform';
                TRANSITION_PROPERTY = '-webkit-transition';
            }
            return {
                TRANSFORM: TRANSFORM,
                TRANSITION: TRANSITION,
                TRANSITION_END: TRANSITION_END,
                TRANSFORM_PROPERTY: TRANSFORM_PROPERTY,
                TRANSITION_PROPERTY: TRANSITION_PROPERTY
            };
        }
        function getOrigin(first, second) {
            return {
                x: (first.x + second.x) / 2,
                y: (first.y + second.y) / 2
            };
        }
        function getDistance(start, stop) {
            return Math.sqrt(Math.pow((stop.x - start.x), 2) + Math.pow((stop.y - start.y), 2));
        }
        function setScaleAnimation(scale, animation) {
            var transition_animation = '';
            var x, y;
            if (!isCanScale) {
                return;
            }
            isCanScale = false;
            if (animation) {
                transition_animation = 'none';
            } else {
                transition_animation = vendors.TRANSFORM_PROPERTY + ' 0s ease-out';
            }
            element.style[vendors.TRANSITION] = transition_animation;
            x = origin.x + (-origin.x) * scale;
            y = origin.y + (-origin.y) * scale;

            element.style[vendors.TRANSFORM] = 'matrix(' + scale + ', 0, 0, ' + scale + ', ' + x + ', ' + y +  ')';
        }
        vendors = vendor();
        wrapper.addEventListener('touchstart', handleTouch);
        wrapper.addEventListener('touchmove', handleTouch);
        wrapper.addEventListener('touchend', handleTouch);
        wrapper.addEventListener('touchcancel', handleTouch);









//移动
        var flag = false;
        var cur = {
            x:0,
            y:0
        }
        var nx,ny,dx,dy,x,y ;
        function down(){
            flag = true;
            var touch ;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            cur.x = touch.clientX;
            cur.y = touch.clientY;
            dx = div2.offsetLeft;

            dy = div2.offsetTop;

        }
        function move(){
            if(flag){
                var touch ;
                if(event.touches){
                    touch = event.touches[0];
                }else {
                    touch = event;
                }
                nx = touch.clientX - cur.x;
                ny = touch.clientY - cur.y;
                x = dx+nx;
                y = dy+ny;

                // div2.style.left = x > 0 ? x+"px" : 0;
                // div2.style.top = y > 0 ? y +"px" : 0;

                if (x + div2.clientWidth < screen.width && x > 0) {
                    div2.style.left = x + "px";
                }
                if (y + div2.clientHeight < screen.height && y > 0) {
                    div2.style.top = y + 'px';
                }
                // div2.style.left = x + div2.clientWidth > boundary.right ? boundary.right : x;
                // div2.style.top = y + div2.clientHeight > boundary.bottom ? boundary.bottom : y;
                console.log(screen.width);

                console.log("当前图片距离左边距离"+div2.offsetLeft);

                console.log("当前鼠标点击的位置"+touch.clientX);
                console.log(div2.style.left);
                console.log("拖动的距离"+nx);






                //阻止页面的滑动默认事件
                document.addEventListener("touchmove",function(){
                    event.preventDefault();
                },false);
            }
        }
        //鼠标释放时候的函数
        function end(){

            flag = false;
        }
        var div2 = document.querySelector(".kk");
        div2.addEventListener("mousedown",function(){
            down();
        },false);
        div2.addEventListener("touchstart",function(){
            down();
        },false)
        div2.addEventListener("mousemove",function(){
            move();
        },false);
        div2.addEventListener("touchmove",function(){
            move();
        },false)
        document.body.addEventListener("mouseup",function(){
            end();
        },false);
        div2.addEventListener("touchend",function(){
            end();
        },false);

    </script>
    <script src="./index/index.js"></script>
</body>
</html>